<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
    <head>
        <meta charset="UTF-8">
        <!-- import CSS -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
        <style>
            body a{
                text-decoration: none;
                color: #6c6c6c;
            }
            .pt:hover{
                position: relative;
                top:5px;
                box-shadow: 0 0 10px 2px #d3dce6;
            }

        </style>
    </head>
    <body>
        <div id="app">
            <el-container>
                <el-header style=" width: 100%;padding: 0; height: 150px;">
                    <!--导航菜单开始-->
                    <div style="background-color: black">
                        <el-menu style="width: 100%;margin: 0 auto;height: 100px;"
                                 :default-active="activeIndex"
                                 class="el-menu-demo"
                                 mode="horizontal"
                                 @select="handleSelect"
                                 background-color="black"
                                 text-color="#fff"
                                 active-text-color="#fff">
                            <a href=""><img src="imgs/logo.png"style="width: 40px;height: 40px;
                    float: left; margin-top:25px;margin-left: 320px;
                    vertical-align: middle" alt="YxMall商城官网"></a>
                            <el-menu-item v-for="c in categoryArr" :index="c.id">{{c.name}}</el-menu-item>

                            <div style="float: right;position: relative;top: 30px;right: 500px">
                                <el-input placeholder="请输入商品信息" v-model="wd">
                                    <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
                                </el-input>
                            </div>

                            <a href=""style="text-decoration: none;color:white;float: right;position: relative;
                        margin-top:35px;right: 150px;line-height: 30px">全部商品</a>

                            <div style="float: right;position: relative;top:25px">

                                <a href=""><img src="imgs/1.jpg"  alt=""></a>
                                <a href=""><img src="imgs/2.jpg"  alt=""></a>
                            </div>
                        </el-menu>
                    </div>
                    <!--导航菜单结束-->
                    <div class="d_img" style="float:left;z-index:10;background-color: rgb(247,247,247);height:70px;width: 100%;">
                        <el-breadcrumb separator="/" style="margin-top: 30px;margin-left: 300px">
                            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
                            <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                            <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>


                </el-header>
                <el-main style="width: 1200px;margin: 0 auto">
                    <el-card>
                        <el-row gutter="2">
                            <el-col  class="pt" style="margin: 10px 0" span="6" v-for="p in productArr">
                                <el-card>
                                    <a href="/detail.html">
                                        <img class="p_img" :src="p.url" width="100%" height="180px" alt="">
                                    </a>

                                    <div>
                                        <p style="font-size: 15px;height: 40px;margin-top: 0">
                                            <a style="text-decoration: none;color: #3f3f3f" href="/detail.html">
                                                {{p.title}}
                                            </a>
                                        </p>
                                        <p style="font-size: 12px;color: #666">
                                            ￥{{p.price}} 浏览量{{p.viewCount}}
                                            <span style="float: right">销量:{{p.saleCount}}件</span>
                                        </p>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-main>

                <el-footer>
                    <div style="height: 95px;background-image: url('imgs/wave.png')">
                    </div>
                    <div style="background-color: #3f3f3f;padding:30px 0;text-align: center;color: #b1b1b1">
                        <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号
                        </p>
                        <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
                        <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
                    </div>
                </el-footer>
            </el-container>
        </div>
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <!-- import Vue before Element -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
    <script>
        let v = new Vue({
            el: '#app',
            data: function() {
                return {
                    activeIndex:'',
                    wd:"",
                    categoryArr: [],
                    price:{p1:"",price:""},
                    saleCount:{c1:"",c2:""},
                    productArr:[{title:"手机",price:200,url:"imgs/手机1.jpg",viewCount:300,saleCount:400},
                        {title:"手机",price:200,url:"imgs/手机1.jpg",viewCount:300,saleCount:400},
                        {title:"手机",price:200,url:"imgs/手机1.jpg",viewCount:300,saleCount:400},
                        {title:"手机",price:200,url:"imgs/手机1.jpg",viewCount:300,saleCount:400},
                        {title:"手机",price:200,url:"imgs/手机1.jpg",viewCount:300,saleCount:400},],
                    num:1,
                }
            },
            methods: {
                handleSelect(key, keyPath) {
                    if (key == '1-2') {
                        let name = prompt("请输入分类的名称");
                        if (name == null) {
                            return;
                        }
                        if (name == '') {
                            v.$message.error("分类名称不能为空");
                            return;
                        }

                    }
                }

            },
            created:function () {

            }
        })
    </script>
</html>
